<template>
    <div>
        <el-upload multiple
                   :list-type="list_type"
                   :show-file-list="showfilelist"
                   class="upload-demo"
                   ref="upload"
                   :data.sync="AnotherData"
                   :action="action"
                   :on-preview="handlePreview"
                   :on-remove="handleRemove"
                   :on-change.sync="handleChange"
                   :on-success="handlesuccess"
                   :on-error="handleerror"
                   :file-list.sync="fileList"
                   :headers="token"
                   :auto-upload="false">
            <i class="el-icon-plus"></i>
<!--            <el-button slot="trigger" v-show="showbtnselect" :size="btnsize" type="primary">{{ content }}</el-button>-->
<!--            <el-button v-show="upshow" style="margin-left: 10px;" :size="btnsize" type="success" @click="submitUpload">上传到服务器</el-button>-->
        </el-upload>
        <el-dialog :visible.sync="dialogVisible" :modal="false">
            <img width="100%" :src="dialogImageUrl" alt="" >
        </el-dialog>
    </div>
</template> 

<script>
    export default {
        name: "UploadFile",
        props: {
            AnotherData: {
                type: Object,
                required: true
            },
            upshow: {
                type: Boolean,
                default: false,
            },
            showfilelist: {
                type: Boolean,
                default: true,
            },
            showbtnselect: {
                type: Boolean,
                default: true,
            },
            content:{
                type:String,
                required: false,
                default:'选取文件',
            },
            btnsize:{
                type:String,
                required: false,
                default:'mini',
            },
            //用于在父级页面添加数据
            Addlistdata:{
                type:Function,
                required:false,
                default:function () {
                    return;
                }
            },
            list_type:{
                type:String,
                required: false,
                default:'picture',
            }
        },
        data(){
            return {
                dialogImageUrl: '',
                dialogVisible: false,
                fileList:[],
                token: { Authorization: "Bearer " + window.sessionStorage.getItem('token') },
                update_result: true,
                apiresult: true,
                requiredbit: this.requireddb,
                action: this.$http.defaults.baseURL + "PublicMethodApi/UploadFile/",
            }
        },
        methods: {
            submitUpload() {
                if (this.fileList.length > 0) {
                    this.$refs.upload.submit();
                }
                else if (this.requiredbit && this.requiredbit == true) {
                    this.$message.info('请选择你要上传的文件!');
                }
            },
            handleRemove(file, fileList) {
                this.fileList = fileList;
                this.Addlistdata()
            },
            handlePreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            handleChange(file, fileList) {
                this.fileList = fileList;
                this.Addlistdata()
            },
            handlesuccess(response, file, fileList) {
                if (response) {
                    this.$message.success('文件上传成功!')
                    this.clearfilelist()
                }
                else {
                    this.clearfilelist()
                    this.$message.warning('文件上传失败,请重试!')
                }
            },
            handleerror() {
                this.clearfilelist()
                this.$message.warning('文件上传接口异常,请联系管理员!')
            },
            clearfilelist() {
                this.$refs.upload.clearFiles()
            }
        }
    }
</script>

<style scoped>
    .upload-demo{
        display: block;
    }
</style>
